<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3实现响应式布局项目开发</title>
    <link rel="stylesheet" href="./src/css/demo.css">
</head>

<body>
    <div class="wrapper">
        <div class="header">
            <div class="nav">
                <a href="#" class="logo">
                    <img src="http://qty83k.creatby.com/materials/95622/origin/d5144dfb2dcb65f4d21f23fa042c5d1a_origin.png" alt="">
                </a>
                <ul class="list">
                    <li>
                        <a href="#">网站首页</a>
                    </li>
                    <li>
                        <a href="#">精品路线</a>
                    </li>
                    <li>
                        <a href="#">服务优势</a>
                    </li>
                    <li>
                        <a href="#">关于我们</a>
                    </li>
                    <li>
                        <a href="#">联系我们</a>
                    </li>
                </ul>
                <div class="btnWrap">
                    <span class="btn" id="btn"></span>
                    <ul>
                        <li>
                            <a href="#">网站首页</a>
                        </li>
                        <li>
                            <a href="#">精品路线</a>
                        </li>
                        <li>
                            <a href="#">服务优势</a>
                        </li>
                        <li>
                            <a href="#">关于我们</a>
                        </li>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="swiper" id="swiper"></div>
            <div class="text">
                <p>欧洲曼妙之旅  海港之声</p>
                <p>Enjoy the sound of the European seaport</p>
            </div>
            <div class="tran">
                <ul>
                    <li>
                        <img src="./src/img/4.png" alt="">
                        <p>多项度假出行路线</p>
                    </li>
                    <li>
                        <img src="./src/img/5.png" alt="">
                        <p>多年服务经验</p>
                    </li>
                    <li>
                        <img src="./src/img/6.png" alt="">
                        <p>度假品质保证</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="project">
            <div class="title">热销项目:</div>
            <div class="list">
                <div class="item">
                    <img src="./src/img/7.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>
                <div class="item">
                    <img src="./src/img/8.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/9.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/14.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/10.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/11.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/12.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/13.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>
                <div class="item">
                    <img src="./src/img/7.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/8.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/13.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>  <div class="item">
                    <img src="./src/img/7.png" alt="">
                    <p>尼罗河世界上最长河流</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="shadow"></div>
            <a href="#">
                <img src="http://qty83k.creatby.com/materials/95622/origin/d5144dfb2dcb65f4d21f23fa042c5d1a_origin.png" alt="">
            </a>
            <p>在旅行作为一种社会行为，古代即以存在，中国是世界文明古国之一，旅行活动的兴起同样居世界前列，中国
                早在公元前22世纪就有了。当时最典型的旅行家大概要数大禹了，他为了疏浚九江十八河，游览了大好河山。
            </p>
        </div>
    </div>
    <script src="./src/js/jquery.min.js"></script>
    <script src="./src/js/carousel/swiper.js"></script>
    <script src="./src/js/demo.js"></script>
</body>

</html>